<!doctype html>
<html>
<head>
<title>Mobile Cookbook</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no,target-densitydpi=medium-dpi" />

<link rel="stylesheet" type="text/css" href="css/mui-base.css" />
<link rel="stylesheet" type="text/css" href="css/mui-slide.css" />
<link rel="stylesheet" type="text/css" href="css/mui-swipechange.css" />
<link rel="stylesheet" type="text/css" href="css/mui-toolbar.css" />
<link rel="stylesheet" type="text/css" href="css/mui-button.css" />
<link rel="stylesheet" type="text/css" href="css/mui-checkbox.css" />
<link rel="stylesheet" type="text/css" href="css/mui-input.css" />
<link rel="stylesheet" type="text/css" href="css/mui-radio.css" />
<link rel="stylesheet" type="text/css" href="css/mui-list.css" />
<link rel="stylesheet" type="text/css" href="css/mui-dialog.css" />
<link rel="stylesheet" type="text/css" href="css/mui-slider.css" />
<link rel="stylesheet" type="text/css" href="css/mui-toggleswitch.css" />
<link rel="stylesheet" type="text/css" href="css/mui-progress.css" />
<link rel="stylesheet" type="text/css" href="css/mui-select.css" />
<link rel="stylesheet" type="text/css" href="css/mui-imageswitch.css" />
<link rel="stylesheet" type="text/css" href="css/mui-toolbar.css" />

<style type="text/css">

body > .toolbar_header{
	position: fixed;
	width: 100%;
	top: 0;
	left: 0;
	z-index: 1;
}
body > .toolbar_header .home{
	position: absolute;
	top: 5px;
	left: 10px;
	width: 60px;
	
	

}
body > .toolbar_header .home .btn_text{
	padding:3px 2px 3px 2px; 
	
}
body > .toolbar_header .next{
	position: absolute;
	top: 15px;
	right: 10px;
}
body > .toolbar_footer{
	position: fixed;
	width: 100%;
	bottom: 0;
	left: 0;
	z-index: 1;
}
#swipe > .wrap > div > div{
	height: 100%;
	line-height: 16px;
	text-align: left;
	color: black;
	font-size: 16px;
	font-weight: normal;
	background: none;
	padding: 10px;
	background: rgb(245,245,245);

}
#swipe > .wrap > div:first-child > div{
	padding: 0;
}
#swipe > .wrap > div:first-child .list>li{
	-webkit-border-radius: 0;
	-moz-border-radius: 0;
	-ms-border-radius: 0;
}
.btn{
	margin: 0 auto;
	width: 80%;
}
.btn_group{
	width: 80%;
	margin: 0 auto;
}
.toolbar_header ~ p{
	background: rgb(245,245,245);
	line-height: 28px;

}
</style>


</head>
<body>
<div class="toolbar_header header_blue">
	<h1>JX MUI</h1>
	<bntton id="home" class="home btn btn_blue" href="javascript:">
		<span class="btn_text">home</span>
	</button>
	<!-- <a id="pre" class="pre" href="javascript:">pre</a>
	<a id="next" class="next" href="javascript:">next</a> -->
</div>

<div id='swipe' class='swipeChange' style="margin-top:40px;">
  	<ul class="wrap">
  		<li>
			<div>
				<ul id="mainlist" class="list list_white conner_round_vertical_group">
					<li id="button_page" class="list_item">
						<a class="list_text">Button</a>
					</li>
					<li id="button_page" class="list_item">
						<a class="list_text">Check Box</a>
					</li>
					<li id="button_page" class="list_item">
						<a class="list_text">Text Input</a>
					</li>
					<li id="button_page" class="list_item">
						<a class="list_text">Toggle Switch</a>
					</li>
					<li id="button_page" class="list_item">
						<a class="list_text">Progress</a>
					</li>

					<li id="button_page" class="list_item">
						<a class="list_text">Radio</a>
					</li>
					<li id="button_page" class="list_item">
						<a class="list_text">Image Switch</a>
					</li>
					<li id="button_page" class="list_item">
						<a class="list_text">Select</a>
					</li>
					<li id="button_page" class="list_item">
						<a class="list_text">Dialog</a>
					</li>
					<li id="button_page" class="list_item">
						<a class="list_text">ToolBar</a>
					</li>
					<li id="button_page" class="list_item">
						<a class="list_text">Slider</a>
					</li>
					<li id="button_page" class="list_item">
						<a class="list_text">List</a>
					</li>
					<li id="button_page" class="list_item">
						<a class="list_text">Group List</a>
					</li>
				</ul>
	  		</div>	
	  	</li>

		<li>
			<div style="text-align:center;">
				<p style="margin-top:10px;">
					<button id="w_button" class="btn btn_white">
						<span class="btn_text">button</span>
					</button>
				</p>
				<p style="margin-top:10px;">
					<button id="g_button" class="btn btn_green" >
						<span class="btn_text">button</span>
					</button>
				</p>
				<p style="margin-top:10px;">
					<button id="bl_button" class="btn btn_black">
						<span class="btn_text">button</span>
					</button>
				</p>
				<p style="margin-top:10px;">
					<button id="b_button" class="btn btn_blue">
						<span class="btn_text">button</span>
					</button>
				</p>
				<p>
					<button id="w_icon_l_button" class="btn btn_white btn_icon" style="margin-bottom:10px;margin-top:20px;">
						<span class="left_icon"></span>
						<span class="btn_text">button</span>
					</button>
					<button id="w_icon_r_button" class="btn btn_white btn_icon" style="margin-top:10px;">
						<span class="right_icon"></span>
						<span class="btn_text">button</span>
					</button>
				</p>
				<p>
					<button id="g_icon_l_button" class="btn btn_green btn_icon" style="margin-top:10px;">
						<span class="left_icon"></span>
						<span class="btn_text">button</span>
					</button>
					<button id="g_icon_r_button" class="btn btn_green btn_icon" style="margin-top:10px;">
						<span class="right_icon"></span>
						<span class="btn_text">button</span>
					</button>
				</p>
				<p style="margin-top:10px;">
					<button id="bl_icon_l_button" class="btn btn_black btn_icon">
						<span class="left_icon"></span>
						<span class="btn_text">button</span>
					</button>
					<button id="bl_icon_r_button" class="btn btn_black btn_icon" style="margin-top:10px;">
						<span class="right_icon"></span>
						<span class="btn_text">button</span>
					</button>
				</p>
				<p style="margin-top:10px;">
					<button id="b_icon_l_button" class="btn btn_blue btn_icon">
						<span class="left_icon"></span>
						<span class="btn_text">button</span>
					</button>
					<button id="b_icon_r_button" class="btn btn_blue btn_icon" style="margin-top:10px;">
						<span class="right_icon"></span>
						<span class="btn_text">button</span>
					</button>
				</p>
				<div id="w_btn_list" class="btn_group" style="margin-bottom:10px;margin-top:20px;">
					<button class="btn btn_white"><span class="btn_text">1</span></button>
					<button class="btn btn_white"><span class="btn_text">2</span></button>
					<button class="btn btn_white"><span class="btn_text">3</span></button>
				</div>	
				<div id="w_v_btn_list" class="btn_group vertical" style="margin-bottom:10px;">
					<button class="btn btn_white"><span class="btn_text">1</span></button>
					<button class="btn btn_white"><span class="btn_text">2</span></button>
					<button class="btn btn_white"><span class="btn_text">3</span></button>
				</div>	
				<div id="g_btn_list" class="btn_group" style="margin-bottom:10px;">
					<button class="btn btn_green"><span class="btn_text">1</span></button>
					<button class="btn btn_green"><span class="btn_text">2</span></button>
					<button class="btn btn_green"><span class="btn_text">3</span></button>
				</div>	
				<div id="g_v_btn_list" class="btn_group vertical" style="margin-bottom:10px;">
					<button class="btn btn_green"><span class="btn_text">1</span></button>
					<button class="btn btn_green"><span class="btn_text">2</span></button>
					<button class="btn btn_green"><span class="btn_text">3</span></button>
				</div>	


				<div id="bl_btn_list" class="btn_group" style="margin-bottom:10px;">
					<button class="btn btn_black"><span class="btn_text">1</span></button>
					<button class="btn btn_black"><span class="btn_text">2</span></button>
					<button class="btn btn_black"><span class="btn_text">3</span></button>
				</div>	
				<div id="bl_v_btn_list" class="btn_group vertical" style="margin-bottom:10px;">
					<button class="btn btn_black"><span class="btn_text">1</span></button>
					<button class="btn btn_black"><span class="btn_text">2</span></button>
					<button class="btn btn_black"><span class="btn_text">3</span></button>
				</div>	

				<div id="b_btn_list" class="btn_group" style="margin-bottom:10px;">
					<button class="btn btn_blue"><span class="btn_text">1</span></button>
					<button class="btn btn_blue"><span class="btn_text">2</span></button>
					<button class="btn btn_blue"><span class="btn_text">3</span></button>
				</div>	
				<div id="b_v_btn_list" class="btn_group vertical">
					<button class="btn btn_blue"><span class="btn_text">1</span></button>
					<button class="btn btn_blue"><span class="btn_text">2</span></button>
					<button class="btn btn_blue"><span class="btn_text">3</span></button>
				</div>	
			</div>
		</li>
		<li>
				<div>
				<label id="checkbox" class="checkbox checkbox_white" for="cb0" style="margin-top:20px;">
					<input id="cb0" name="cb0" type="checkbox" />
					<span class="checkbox_text">0</span>
				</label>
				<label id="bl_checkbox" class="checkbox checkbox_black" for="cb10" style="margin-top:10px;"> 
					<input id="cb10" name="cb10" type="checkbox" />
					<span class="checkbox_text">0</span>
				</label>
		
				<fieldset id="checkboxlist" class="checkbox_group" style="margin-top:10px">
					<label class="checkbox checkbox_white" for="cb1">
						<input id="cb1" name="cb1" type="checkbox" />
						<span class="checkbox_text">1</span>
					</label>
				
					<label class="checkbox checkbox_white" for="cb2">
						<input id="cb2" name="cb2" type="checkbox" />
						<span class="checkbox_text">2</span>
					</label>
				
					<label class="checkbox checkbox_white" for="cb3">
						<input id="cb3" name="cb3" type="checkbox" />
						<span class="checkbox_text">3</span>
					</label>
				</fieldset>
				<fieldset id="bl_checkboxlist" class="checkbox_group" style="margin-top:10px">
					<label class="checkbox checkbox_black" for="cb11">
						<input id="cb11" name="cb11" type="checkbox" />
						<span class="checkbox_text">1</span>
					</label>
				
					<label class="checkbox checkbox_black" for="cb12">
						<input id="cb12" name="cb12" type="checkbox" />
						<span class="checkbox_text">2</span>
					</label>
				
					<label class="checkbox checkbox_black" for="cb13">
						<input id="cb13" name="cb13" type="checkbox" />
						<span class="checkbox_text">3</span>
					</label>
				</fieldset>

			
				<fieldset id="v_checkboxlist" class="checkbox_group vertical" style="margin-top:10px">
					<label class="checkbox checkbox_white" for="cb4">
						<input id="cb4" name="cb4" type="checkbox" />
						<span class="checkbox_icon"></span>
						<span class="checkbox_text">1</span>
					</label>
				
					<label class="checkbox checkbox_white" for="cb5">
						<input id="cb5" name="cb5" type="checkbox" />
						<span class="checkbox_icon"></span>
						<span class="checkbox_text">2</span>
					</label>
				
					<label class="checkbox checkbox_white" for="cb6">
						<input id="cb6" name="cb6" type="checkbox" />
						<span class="checkbox_icon"></span>
						<span class="checkbox_text">3</span>
					</label>
				</fieldset>


				<fieldset id="bl_v_checkboxlist" class="checkbox_group vertical" style="margin-top:10px">
					<label class="checkbox checkbox_black" for="cb14">
						<input id="cb14" name="cb14" type="checkbox" />
						<span class="checkbox_icon"></span>
						<span class="checkbox_text">1</span>
					</label>
				
					<label class="checkbox checkbox_black" for="cb15">
						<input id="cb15" name="cb15" type="checkbox" />
						<span class="checkbox_icon"></span>
						<span class="checkbox_text">2</span>
					</label>
				
					<label class="checkbox checkbox_black" for="cb16">
						<input id="cb16" name="cb16" type="checkbox" />
						<span class="checkbox_icon"></span>
						<span class="checkbox_text">3</span>
					</label>
				</fieldset>
					
			</div>
		</li>
		<li>
			<div>
				<p>
					<input type="text" class="input input_white" placeholder="text input" style="margin-top:20px;"></input>
					<textarea id="textarea" class="input input_white" placeholder="textarea" style="margin-top:20px;"></textarea>
				</p>
				<p>
					<textarea id="autoGrowTextArea" class="input input_white" placeholder="auto grow textarea" style="margin-top:20px;"></textarea>
				</p>
				<p>
					<div class="input_group" style="margin-top:20px;">
						<input type="text" class="input input_white" placeholder="text input"></input>
						<input type="text" class="input input_white" placeholder="text input"></input>
						<input type="text" class="input input_white" placeholder="text input"></input>
					</div>
				<p>
				<p>
					<div class="icon_input icon_input_white" style="margin-top:20px;">
						<span class="input_icon"></span>
						<input type="text" placeholder="icon input"/>
					</div>
				<p>
				<p>
					<div class="icon_input_group" style="margin-top:20px;">
						<div class="icon_input icon_input_white">
							<span class="input_icon"></span>
							<input type="text" placeholder="icon input" />
						</div>
						<div class="icon_input icon_input_white">
							<span class="input_icon"></span>
							<input type="text" placeholder="icon input"/>
						</div>
						<div class="icon_input icon_input_white">
							<span class="input_icon"></span>
							<input type="text" placeholder="icon input" />
						</div>
					</div>
				</p>

			</div>
		</li>
		<li>
			<div>
			    <div id="toggleSwitch" class="toggle_switch" style="display:block;margin-top:20px;">
			    	<div class="toggle_wrap">
						<div class="toggle_text">
					    	<span class="toggle_text_blue">on</span>
					    	<span class="toggle_text_white">off</span>
						</div>
					<a class="toggle_handler toggle_handler_white"></a>
					</div>
				</div>
			    <div id="bl_toggleSwitch" class="toggle_switch" style="display:block;margin-top:20px;">
			    	<div class="toggle_wrap">
						<div class="toggle_text">
					    	<span class="toggle_text_blue">on</span>
					    	<span class="toggle_text_black">off</span>
						</div>
					<a class="toggle_handler toggle_handler_black"></a>
					</div>
				</div>
			    <div id="b_toggleSwitch" class="toggle_switch" style="display:block;margin-top:20px;">
			    	<div class="toggle_wrap">
						<div class="toggle_text">
					    	<span class="toggle_text_blue">on</span>
					    	<span class="toggle_text_deepblue">off</span>
						</div>
					<a class="toggle_handler toggle_handler_blue"></a>
					</div>
				</div>
			</div>
		</li>
		<li>
			<div>
			
				<div id="progress" class="progress" style="margin-top:20px;">
					<div class="progress_wrap">
						<span class="bar_text"></span>
						<div class="bar bar_image"></div>
					</div>
				</div>
				<div id="progress_g" class="progress" style="margin-top:40px;">
					<div class="progress_wrap">
						<span class="bar_text"></span>
						<div class="bar bar_green"></div>
					</div>
				</div>
				<div id="progress_b" class="progress" style="margin-top:40px;">
					<div class="progress_wrap">
						<span class="bar_text"></span>
						<div class="bar bar_blue"></div>
					</div>
				</div>
				<div id="progress_y" class="progress" style="margin-top:40px;">
					<div class="progress_wrap">
						<span class="bar_text"></span>
						<div class="bar bar_yellow"></div>
					</div>
				</div>
			</div>
		</li>
		<li>
			<div>
				<label id="radio" for="radio0" class="radio radio_white" style="margin-top:10px;">
					<input id="radio0" type="radio" name="radio" value="0"/>
					<span class="radio_text">0</span>
				</label>
				<label id="bl_radio" for="radio21" class="radio radio_black" style="margin-top:10px;">
					<input id="radio21" type="radio" name="radio" value="0"/>
					<span class="radio_text">0</span>
				</label>
				
				<fieldset id="radioList" class="radio_group" style="margin-top:20px;">
					<label for="radio1" class="radio radio_white">
						<input id="radio1" type="radio" name="radio" value="1"/>
						<span class="radio_text">1</span>
					</label>

					<label for="radio2" class="radio radio_white">
						<input id="radio2" type="radio" name="radio" value="2"/>
						<span class="radio_text">2</span>
					</label>

					<label for="radio3" class="radio radio_white">
						<input id="radio3" type="radio" name="radio" value="3"/>
						<span class="radio_text">3</span>
					</label>
				</fieldset>

				<fieldset id="bl_radioList" class="radio_group" style="margin-top:10px;">
					<label for="radio11" class="radio radio_black">
						<input id="radio11" type="radio" name="radio" value="1"/>
						<span class="radio_text">1</span>
					</label>

					<label for="radio12" class="radio radio_black">
						<input id="radio12" type="radio" name="radio" value="2"/>
						<span class="radio_text">2</span>
					</label>

					<label for="radio13" class="radio radio_black">
						<input id="radio13" type="radio" name="radio" value="3"/>
						<span class="radio_text">3</span>
					</label>
				</fieldset>


				<fieldset id="v_radioList" class="radio_group vertical" style="margin-top:10px;">
					<label for="radio4" class="radio radio_white">
						<input id="radio4" type="radio" name="radio" value="4"/>
						<span class="radio_icon"></span>
						<span class="radio_text">4</span>
					</label>

					<label for="radio5" class="radio radio_white">
						<input id="radio5" type="radio" name="radio" value="5"/>
						<span class="radio_icon"></span>
						<span class="radio_text">5</span>
					</label>

					<label for="radio6" class="radio radio_white">
						<input id="radio6" type="radio" name="radio" value="6"/>
						<span class="radio_icon"></span>
						<span class="radio_text">6</span>
					</label>
				</fieldset>

				<fieldset id="v_bl_radioList" class="radio_group vertical" style="margin-top:10px;">
					<label for="radio24" class="radio radio_black">
						<input id="radio24" type="radio" name="radio" value="4"/>
						<span class="radio_icon"></span>
						<span class="radio_text">4</span>
					</label>

					<label for="radio25" class="radio radio_black">
						<input id="radio25" type="radio" name="radio" value="5"/>
						<span class="radio_icon"></span>
						<span class="radio_text">5</span>
					</label>

					<label for="radio26" class="radio radio_black">
						<input id="radio26" type="radio" name="radio" value="6"/>
						<span class="radio_icon"></span>
						<span class="radio_text">6</span>
					</label>
				</fieldset>
			</div>
		</li>
		<li>
			<div>
				
				<div id='image_slider' class='imagechange' style="margin-top:20px;">
				  	<div class="wrap">
						<div>
							<img src="http://www.cnblogs.com/images/cnblogs_com/Cson/290336/t_3a.jpg">
						</div>
						<div>
							<img src="http://www.cnblogs.com/images/cnblogs_com/Cson/290336/t_436d106e37b424ba42169473.jpg">
						</div>
						<div>
							<img src="http://www.cnblogs.com/images/cnblogs_com/Cson/290336/t_6a.jpg">
						</div>
						<div>
							<img src="http://www.cnblogs.com/images/cnblogs_com/Cson/290336/t_10a.jpg">
						</div>
						<div>
							<img src="http://www.cnblogs.com/images/cnblogs_com/Cson/290336/t_1a.jpg">
						</div>
					 </div>
					 <ul class="btnsWrap">
					 </ul>
				</div>
			</div>
		</li>
		<li>
			<div>				
			    <div id="w_menuSelector" class="select select_white" style="margin-top:20px;">
			    	<span class="select_text"></span>
			    	<select>
			    		<option>cson</option>
			    		<option>小c</option>
			    	</select>
			    </div>
			    <div id="g_menuSelector" class="select select_green" style="margin-top:20px;">
			    	<span class="select_text"></span>
			    	<select>
			    		<option>cson</option>
			    		<option>小c</option>
			    	</select>
			    </div>

			    <div id="b_menuSelector" class="select select_blue" style="margin-top:20px;">
			    	<span class="select_text"></span>
			    	<select>
			    		<option>cson</option>
			    		<option>小c</option>
			    	</select>
			    </div>

			    <div id="bl_menuSelector" class="select select_black" style="margin-top:20px;">
			    	<span class="select_text"></span>
			    	<select>
			    		<option>cson</option>
			    		<option>小c</option>
			    	</select>
			    </div>
	
			</div>
		</li>
		<li>
			<div>
				<input id="none" type="button" value="none effect">
				<input id="fade" type="button" value="fade effect">
				<input id="pop" type="button" value="pop effect">
				<input id="slideup" type="button" value="slide up effect">
				<input id="slidedown" type="button" value="slide down effect">

				<div class="mask"></div>

				<div id="dialog" class="dialog">
					<div class="header">
						<h4>Dialog Header</h4>
					</div>
					<div class="content">
						<p style = "line-height:80px;text-align:center;font-size:36px;color:#333;cursor:pointer">
							click me to hide
						</p>
					</div>
				</div>
			</div>
		</li>
		<li>
			<div>
				<div>
					<div class="toolbar_header header_black">
						<h1>header</h1>
					</div>
					<p>content</p>
					<p>content</p>
					<p>content</p>
					<div class="toolbar_footer footer_black">
						<h4>footer</h4>
					</div>
				</div>

				<div style="margin-top:30px;">
					<div class="toolbar_header header_blue">
						<h1>header</h1>
					</div>
					<p>content</p>
					<p>content</p>
					<p>content</p>
					<div class="toolbar_footer footer_blue">
						<h4>footer</h4>
					</div>
				</div>
				
				<div style="margin-top:30px;">
					<div class="toolbar_header header_white">
						<h1>header</h1>
					</div>
					<p>content</p>
					<p>content</p>
					<p>content</p>
					<div class="toolbar_footer footer_white">
						<h4>footer</h4>
					</div>
				</div>
			</div>
		</li>
		<li>
			<div>
				<div>
				    <div id="slider" class="slider slider_white" style="margin-top:20px;">
				    	<input type="range" />
				    	<a class="slider_handler"></a>
				    </div>		
				    <div id="w_slider" class="slider slider_white" style="margin-top:20px;">
				    	<input type="range" />
				    	<div class="slider_range white"></div>
				    	<a class="slider_handler"></a>
				    </div>	
				    <div id="b_slider" class="slider slider_white" style="margin-top:20px;">
				    	<input type="range" />
				    	<div class="slider_range blue"></div>
				    	<a class="slider_handler"></a>
				    </div>	
				    <div id="g_slider" class="slider slider_white" style="margin-top:20px;">
				    	<input type="range" />
				    	<div class="slider_range green"></div>
				    	<a class="slider_handler"></a>
				    </div>	

			        <div id="v_slider" class="slider slider_white vertical" style="margin-top:40px;float:left;">
				    	<input type="range" />
				    	<a class="slider_handler"></a>
				    </div>	
			      	<div id="v_w_slider" class="slider slider_white vertical" style="margin:40px 0 0 40px;float:left;">
				    	<input type="range" />
				    	<div class="slider_range white"></div>
				    	<a class="slider_handler"></a>
				    </div>	
			    	<div id="v_b_slider" class="slider slider_white vertical" style="margin:40px 0 0 40px;float:left;">
				    	<input type="range" />
				    	<div class="slider_range blue"></div>
				    	<a class="slider_handler"></a>
				    </div>	
			    	<div id="v_g_slider" class="slider slider_white vertical" style="margin:40px 0 0 40px;float:left;">
				    	<input type="range" />
				    	<div class="slider_range green"></div>
				    	<a class="slider_handler"></a>
				    </div>	
				</div>
			</div>
		</li>
		<li>
			<div>
		
				<ul id="list1" class="list list_white conner_round_vertical_group" style="margin-top:20px;">
					<li class="list_item">
						<a  class="list_text">ListItemA</a>
					</li>
					<li class="list_item">
						<a  class="list_text">ListItemB</a>
					</li>
					<li class="list_item">
						<a  class="list_text">ListItemC</a>
					</li>
				</ul>
				
				<ul class="list list_white read_only_list conner_round_vertical_group" style="margin-top:20px;">
					<li class="list_item">
						<a  class="list_text">ListItemA</a>
					</li>
					<li class="list_item">
						<a  class="list_text">ListItemB</a>
					</li>
					<li class="list_item">
						<a  class="list_text">ListItemC</a>
					</li>
				</ul>
				
				<ol id="n_list" class="list list_white num_list conner_round_vertical_group" style="margin-top:20px;">
					<li class="list_item">
						<a class="list_text">ListItemA</a>
					</li>
					<li class="list_item">
						<a class="list_text">ListItemB</a>
					</li>
					<li class="list_item">
						<a class="list_text">ListItemC</a>
					</li>
				</ol>

				<ul id="l_icon_list" class="list list_white conner_round_vertical_group" style="margin-top:20px;">
					<li class="list_item">
						<span class="list_icon list_icon_left"></span>
						<a  class="list_text">ListItemA</a>
					</li>
					<li class="list_item">
						<span class="list_icon list_icon_left"></span>
						<a  class="list_text">ListItemB</a>
					</li>
					<li class="list_item">
						<span class="list_icon list_icon_left"></span>
						<a  class="list_text">ListItemC</a>
					</li>
				</ul>

				<ul id="r_icon_list" class="list list_white conner_round_vertical_group" style="margin-top:20px;">
					<li class="list_item">
						<span class="list_icon list_icon_right"></span>
						<a  class="list_text">ListItemA</a>
					</li>
					<li class="list_item">
						<span class="list_icon list_icon_right"></span>
						<a  class="list_text">ListItemB</a>
					</li>
					<li class="list_item">
						<span class="list_icon list_icon_right"></span>
						<a  class="list_text">ListItemC</a>
					</li>
				</ul>
			</div>
		</li>
		<li>
			<div>
				<ul id="groupList" class="group_list" style="margin-top:20px;">
					<li class="list_group">
						<div class="list_group_title list_group_blue_title">
							<h4>Group1</h4>
						</div>
						<div class="list_group_body">
							<ul class="list list_white">
								<li class="list_item">
									<a  class="list_text">ListItemA</a>
								</li>
								<li class="list_item">
									<a  class="list_text">ListItemB</a>
								</li>
								<li class="list_item">
									<a  class="list_text">ListItemC</a>
								</li>
							</ul>
						</div>
					</li>	
					<li class="list_group">
						<div class="list_group_title list_group_blue_title">
							<h4>Group2</h4>
						</div>
						<div class="list_group_body">
							<ul class="list list_white">
								<li class="list_item">
									<a  class="list_text">ListItemA</a>
								</li>
								<li class="list_item">
									<a  class="list_text">ListItemB</a>
								</li>
								<li class="list_item">
									<a  class="list_text">ListItemC</a>
								</li>
							</ul>
						</div>
					</li>	
				</div>
			</div>
		</li>
	</div>

</div>

<!-- <div class="footer footer_blue">
	<h4>footer</h4>
</div> -->
	<script type="text/javascript" src="js/JM.js"></script>
	<script type="text/javascript" src="js/slide.js"></script>
	<script type="text/javascript" src="js/swipechange.js"></script>
	<script type="text/javascript" src="js/button.js"></script>
	<script type="text/javascript" src="js/buttonlist.js"></script>
	<script type="text/javascript" src="js/checkbox.js"></script>
	<script type="text/javascript" src="js/checkboxlist.js"></script>
	<script type="text/javascript" src="js/autogrow_textarea.js"></script>
	<script type="text/javascript" src="js/radio.js"></script>
	<script type="text/javascript" src="js/radiolist.js"></script>
	<script type="text/javascript" src="js/list.js"></script>
	<script type="text/javascript" src="js/grouplist.js"></script>
	<script type="text/javascript" src="js/dialog.js"></script>
	<script type="text/javascript" src="js/slider.js"></script>
	<script type="text/javascript" src="js/toggleswitch.js"></script>
	<script type="text/javascript" src="js/progress.js"></script>
	<script type="text/javascript" src="js/select.js"></script>
	<script type="text/javascript" src="js/imagechange.js"></script>


	<script type="text/javascript">
	var $D = JM.dom,
	$E = JM.event;
	//swipe change

	var sc = MUI.Slide({
		id:"swipe",
		currentIndex:0,
		slideTime:500,
		fastChange:true		
	});

	// $E.on($D.id("pre"),"click",function(){
	// 	sc.pre();
	// });

	$E.on($D.id("home"),"click",function(){
		if(currentDialogFlg){
			dialog.hide(currentEffect);
		}	
		sc.slideTo(0);
	});
	// $E.on(sc,"change",function(e){
	// 	var contents = sc.contents;
	// 	if(e.currentIndex!= 0 ) return;

	// 	for(var i = 1,l = contents.length ; i < l ; i++){
	// 		$D.setStyle(contents[i],"display","block");
	// 	}
	// });

	//main list
	var mainlist = MUI.List({
		id:"mainlist"
	});
	$E.on(mainlist,"selected",function(e){
		// var contents = sc.contents;
		// var si = e.selectedIndex;

		// for(var i=1;i< si + 1; i++){
		// 	$D.setStyle(contents[i],"display","none");
		// }
		sc.slideTo(e.selectedIndex+1);
	});

	//button
	var w_btn = MUI.Button({
		id:"w_button"
	});
	var g_btn = MUI.Button({
		id:"g_button"
	});
	var bl_btn = MUI.Button({
		id:"bl_button"
	});
	var b_btn = MUI.Button({
		id:"b_button"
	});

	var w_i_l_btn = MUI.Button({
		id:"w_icon_l_button"
	});
	var w_i_r_btn = MUI.Button({
		id:"w_icon_r_button"
	});
	var g_i_l_btn = MUI.Button({
		id:"g_icon_l_button"
	});
	var g_i_r_btn = MUI.Button({
		id:"g_icon_r_button"
	});
	var bl_i_l_btn = MUI.Button({
		id:"bl_icon_l_button"
	});
	var bl_i_r_btn = MUI.Button({
		id:"bl_icon_r_button"
	});
	var b_i_l_btn = MUI.Button({
		id:"b_icon_l_button"
	});
	var b_i_r_btn = MUI.Button({
		id:"b_icon_r_button"
	});

	var w_btn_list = MUI.ButtonList({
		id:"w_btn_list"
	});
	var w_btn_list = MUI.ButtonList({
		id:"w_v_btn_list"
	});
	var g_btn_list = MUI.ButtonList({
		id:"g_btn_list"
	});
	var g_btn_list = MUI.ButtonList({
		id:"g_v_btn_list"
	});
	var bl_btn_list = MUI.ButtonList({
		id:"bl_btn_list"
	});
	var bl_btn_list = MUI.ButtonList({
		id:"bl_v_btn_list"
	});
	var b_btn_list = MUI.ButtonList({
		id:"b_btn_list"
	});
	var b_btn_list = MUI.ButtonList({
		id:"b_v_btn_list"
	});
	//checkbox
	var cb = MUI.Checkbox({
		id:"checkbox"
	});
	var bl_cb = MUI.Checkbox({
		id:"bl_checkbox"
	});
	var cl = MUI.CheckboxList({
		id:"checkboxlist"
	});
	var bl_cl = MUI.CheckboxList({
		id:"bl_checkboxlist"
	});
	var v_cl = MUI.CheckboxList({
		id:"v_checkboxlist"
	});
	var v_cl = MUI.CheckboxList({
		id:"bl_v_checkboxlist"
	});
	//input
	var autoGrowTextArea = MUI.AutoGrowTextarea({
		id:"autoGrowTextArea"
	});
	//radio
	var radio = MUI.Radio({
		id:"radio"
	});
	var bl_radio = MUI.Radio({
		id:"bl_radio"
	});
	var radiolist = MUI.RadioList({
		id:"radioList"
	});
	var bl_radiolist = MUI.RadioList({
		id:"bl_radioList"
	});
	var v_radiolist = MUI.RadioList({
		id:"v_radioList"
	});
	var v_bl_radiolist = MUI.RadioList({
		id:"v_bl_radioList"
	});
	//list
	var list1 = MUI.List({
		id:"list1"
	});
	var n_list = MUI.List({
		id:"n_list"
	});
	var l_icon_list = MUI.List({
		id:"l_icon_list"
	});
	var r_icon_list = MUI.List({
		id:"r_icon_list"
	});
	var groupList = MUI.GroupList({
		id:"groupList"
	});

	//dialog
	var currentEffect,
		currentDialogFlg;
	
	var dialog = MUI.Dialog({
		id:"dialog"
	});
	dialog.elem.onclick = function(){
		dialog.hide(currentEffect);
		currentDialogFlg = false;
	}	

	$E.on($D.id("none"),"click",function(){
		currentEffect = "none";
		dialog.show("none");
		currentDialogFlg = true;
	});
	$E.on($D.id("fade"),"click",function(){
		currentEffect = "fade";
		dialog.show("fade");
		currentDialogFlg = true;
	});
	$E.on($D.id("pop"),"click",function(){
		currentEffect = "pop";
		dialog.show("pop");
		currentDialogFlg = true;
	});
	$E.on($D.id("slideup"),"click",function(){
		currentEffect = "slideup";
		dialog.show("slideup");
		currentDialogFlg = true;
	});
	$E.on($D.id("slidedown"),"click",function(){
		currentEffect = "slidedown";
		dialog.show("slidedown");
		currentDialogFlg = true;
	});
	//slide
	var sl = MUI.Slider({
		id:"slider"
	});
	sl.setValue(20);
	var w_sl = MUI.Slider({
		id:"w_slider"
	});
	w_sl.setValue(40);
	var b_sl = MUI.Slider({
		id:"b_slider"
	});
	b_sl.setValue(60);
	var g_sl = MUI.Slider({
		id:"g_slider"
	});
	g_sl.setValue(80);

	var v_sl = MUI.Slider({
		id:"v_slider",
		vertical:true
	});
	v_sl.setValue(80);
	var v_w_sl = MUI.Slider({
		id:"v_w_slider",
		vertical:true
	});
	v_w_sl.setValue(60);
	var v_b_sl = MUI.Slider({
		id:"v_b_slider",
		vertical:true
	});
	v_b_sl.setValue(40);
	var v_g_sl = MUI.Slider({
		id:"v_g_slider",
		vertical:true
	});
	v_g_sl.setValue(20);

	//toggleSwitch
	var ts = MUI.ToggleSwitch({
		id:"toggleSwitch"
	});
	var bl_ts = MUI.ToggleSwitch({
		id:"bl_toggleSwitch"
	});
	var b_ts = MUI.ToggleSwitch({
		id:"b_toggleSwitch"
	});

	//progress
	var p = MUI.Progress({
		id:"progress",
		percent:30
	});
	var p_g = MUI.Progress({
		id:"progress_g",
		percent:60
	});
	var p_b = MUI.Progress({
		id:"progress_b",
		percent:90
	});
	var p_y = MUI.Progress({
		id:"progress_y",
		percent:100
	});
	//select	
	var w_sel = MUI.Select({
		id:"w_menuSelector"
	});
	var g_sel = MUI.Select({
		id:"g_menuSelector"
	});
	var b_sel = MUI.Select({
		id:"b_menuSelector"
	});
	var bl_sel = MUI.Select({
		id:"bl_menuSelector"
	});
	//imagechange
	var ic = MUI.ImageChange({
		id:"image_slider",
		isAutoChange:true,
		autoChangeTime:3000,
		canSwipe:true
	});

	J.Util.hideUrlBar();

</script>
</body>

</html>
